<template>
    <div class="footer-pc">
        <div class="autoWidth">
            <div class="footer-list">
                <!-- item代表遍历的元素,idx代表这个元素的下标(名字) -->
                <ul v-for="item,idx in items" :key="idx">
                    <li v-for="i in item" :key="i.name">
                        <router-link to="/">{{i.name}}</router-link>
                    </li>
                </ul>
                <div class="kongbai"></div>
                <div class="erWeiMa">
                    <img src="https://www.hzsp.com/images/code.jpg" alt="官网微信">
                    <img src="https://www.hzsp.com/images/code2.jpg" alt="官网小程序">
                </div>
            </div>
            <a href="https://weibo.com/show8ox?topnav=1&wvr=6&topsug=1"></a>
            <div class="kuai">
                <div class="phone">咨询电话:400-123-1234</div>
                <div class="date2">客服电话服务时间(8:30-17:30)</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            items: {
                itemsA: [
                    { name: '动物乐园', },
                    { name: '车行区' },
                    { name: '步行区' },
                ],
                itemsB: [
                    { name: '游玩演艺' },
                    { name: '亲子乐园' },
                ],
                itemsC: [
                    { name: '活动优惠' },
                    { name: '新闻' },
                    { name: '优惠信息' },
                    { name: '主题活动' },
                ],
                itemsD: [
                    { name: '研学互动' },
                    { name: '研学课堂' },
                    { name: '动物互助' },
                ],
                itemsE: [
                    { name: '美味餐厅' },
                ],
                itemsF: [
                    { name: '计划行程' },
                    { name: '游园指南' },
                    { name: '游园提示' },
                    { name: '园区时间' },
                    { name: '交通指南' },
                    { name: '常见问题' },
                    { name: '地图下载' },
                    { name: '游玩路线' },
                ],
                itemsG: [
                    { name: '关于我们' },
                    { name: '园区简介' },
                ]
            },
        }
    },
}
</script>

<style lang="scss" scoped>
ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    list-style: none;
    text-decoration: none;
    color: #fff;
}

.kongbai {
    width: 200px;
    height: 100px;
}

.footer-pc {
    position: relative;
    width: 100%;
    height: 400px;

    background: url(/public/bot-beijing.jpg);

    .autoWidth {
        width: 1200px;
        height: 100%;
        margin: 0 auto;

        .erWeiMa img {
            margin: 20px 10px 0;
            width: 100px;
            height: 100px;
        }

        .footer-list {
            padding-top: 20px;
            display: flex;

            ul {
                font-size: 15px;
                margin: 10px auto;
            }
        }

        .kuai {
            transform: translate(30%, 60%);
        }
    }
}

.phone {
    margin: 0 auto;
    font-size: 40px;
    color: #fff;
}

.date2 {
    margin: 0 auto;
    font-size: 14px;
    color: #fff;
}
</style>